<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <component :is='componentShow' ref="hw" @titleClick="titleClicks" msg="Hello Vue 3 + Vite" ></component>
  <!-- <HelloWorld ref="hw" @titleClick="titleClicks" msg="Hello Vue 3 + Vite" /> -->
  <div>count: {{count}}</div>
  <button @click="countClick">+</button>
  <div>{{componentShow}}</div>
  <router-view></router-view>
</template>

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from 'comps/HelloWorld.vue'
import Hello from 'comps/Hello.vue' 
import { ref, onMounted, computed, getCurrentInstance } from 'vue'
let count = ref(0)
const titleClicks = () => {
  console.log('父组件接收')
}
const hw = ref(null)
onMounted(() => {
  console.log(hw.value, '组件实例')
})
const countClick = () => {
  count.value++
}
const componentShow = computed(() => {
  if (count.value % 2 === 0) {
    return HelloWorld
  } else {
    return Hello
  }
})
// let intance = getCurrentInstance()
const { ctx }  = getCurrentInstance()
console.log(ctx, '当前组件实例')

</script>

<style>

</style>
